<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入React相关的包 -->
    <script src="./js/react.development.js"></script>
    <!-- 他依赖于REACT,所以必须后引入 -->
    <script src="./js/react-dom.development.js"></script>
</head>

<body>
    <!-- 创建一个空的div容器元素 -->
    <div id="root"></div>

    <script>
        // 创建一个react元素，不是DOM元素
        // React.createElement(
            // type,  // 标签名 => h1
            // [props], // 包含所有标签属性的对象   => {title: '你好, React!'}
            // [...children] // n个子节点 => 'Hello React!'
        // )

        const element = React.createElement(
            'h1',
            {title: 'Hello React!'},
            'helloWorld'
        )
        console.log(element);


         /* 4. 将React元素渲染到页面 */
    /* 
    ReactDOM.render(
      element,  // 要渲染的React元素
      container // 页面中的容器DOM元素
    )
    */

    ReactDOM.render(
        element,document.getElementById('root')
    )
    </script>
</body>

</html>